<template>
  <div class="common-layout">
    <div class="headerBox">
      <div class="leftPart">
        <div class="bigTit">题目分类管理</div>
        <div class="smaTit">管理面试题目的分类和标签</div>
      </div>
      <div class="rightPart">
        <el-button type="primary" @click="centerDialogVisible = true">+添加分类</el-button>
      </div>
    </div>
    <div class="mainCont">
      <div class="header">分类列表</div>
      <el-table
        :data="tableData"
        style="width: 100%"
        :row-style="{ height: '55px' }"
        :header-cell-style="{ background: '#f8f9fa' }"
      >
        <el-table-column label="ID" width="70px">
          <template #default="scope">
            <div style="display: flex; align-items: center">
              <span>{{ scope.row.id }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="颜色" width="65">
          <template #default="scope">
            <div style="display: flex; align-items: center">
              <span
                :style="{
                  width: '25px',
                  height: '25px',
                  background: scope.row.color,
                  borderRadius: '4px',
                }"
              ></span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="分类名称" width="180">
          <template #default="scope">
            <div>{{ scope.row.lname }}</div>
          </template>
        </el-table-column>
        <el-table-column label="描述" width="480">
          <template #default="scope">
            <div>{{ scope.row.describe }}</div>
          </template>
        </el-table-column>
        <el-table-column label="题目数量" width="200">
          <template #default="scope">
            <div>{{ scope.row.quantity }}</div>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" width="230">
          <template #default="scope">
            <div>{{ scope.row.date }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" width="140">
          <template #default="scope">
            <el-tag v-if="scope.row.status" type="success" disable-transitions> 启用 </el-tag>
            <el-tag v-else type="warning" disable-transitions> 停用 </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button
              size="small"
              style="width: 20px; height: 20px; border: 0"
              @click="handleEdit(scope.$index, scope.row)"
            >
              <el-icon size="18px"><Edit /></el-icon>
            </el-button>

            <el-button
              style="width: 30px; height: 30px; border: 0"
              size="small"
              @click="handleDelete(scope.$index, scope.row)"
            >
              <el-icon size="18px" color="red"><DeleteFilled /></el-icon>
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog
      v-model="centerDialogVisible"
      align-center
      title="添加题目分类"
      borderBottom="1px solid #ccc"
      width="500"
      left
      style="overflow: hidden"
    >
      <el-form
        ref="ruleFormRef"
        style="width: 600px"
        :model="ruleForm"
        :rules="rules"
        class="demo-ruleForm"
        :size="formSize"
        status-icon
      >
        <el-form-item label="分类名称" prop="name">
          <el-input v-model="ruleForm.name" />
        </el-form-item>
        <el-form-item label="分类描述" prop="describe">
          <el-input resize="both" v-model="ruleForm.describe" type="textarea" />
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select v-model="ruleForm.status" clearable placeholder="Select" style="width: 472px">
            <el-option
              v-for="item in list"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer" style="margin-bottom: 10px">
          <el-button @click="centerDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="centerDialogVisible = false">保存</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
interface User {
  id: number
  color: string
  lname: string
  describe: string
  quantity: number
  date: string
  status: Boolean
}
const centerDialogVisible = ref(false)
const formSize = ref<ComponentSize>('default')
const handleEdit = (index: number, row: User) => {
  console.log(index, row)
}
const handleDelete = (index: number, row: User) => {
  console.log(index, row)
}
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
interface tsy {
  label: string
  value: string
}
const list: tsy[] = [
  {
    label: '启用',
    value: '启用',
  },
  {
    label: '停用',
    value: '停用',
  },
]
interface RuleForm {
  name: string
  describe: string
  status: tsy[]
}
const ruleForm = ref<RuleForm>({
  name: 'Hello',
  describe: '',
  status: list,
})
const rules = ref<FormRules<RuleForm>>({
  name: [
    { required: true, message: 'Please input Activity name', trigger: 'blur' },
    { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
  ],
})
const tableData: User[] = [
  {
    id: 1,
    color: '#3498db',
    lname: '技术能力',
    describe: '与编程和技术相关的问题',
    quantity: 45,
    date: '2016-05-03',
    status: true,
  },
  {
    id: 2,
    color: '#2ecc71',
    lname: '软技能',
    describe: '人际交往、沟通和协作能力',
    quantity: 28,
    date: '2016-05-02',
    status: true,
  },
  {
    id: 3,
    color: '#f39c12',
    lname: '问题解决',
    describe: '解决技术难题和分析能力',
    quantity: 32,
    date: '2016-05-04',
    status: true,
  },
  {
    id: 4,
    color: '#e74c3c',
    lname: '公司文化',
    describe: '价值观和文化契合度',
    quantity: 18,
    date: '2016-05-01',
    status: false,
  },
  {
    id: 5,
    color: '#9b59b6',
    lname: '项目经验',
    describe: '过往项目和工作经历',
    quantity: 12,
    date: '2016-05-01',
    status: true,
  },
]
</script>
<style scoped>
.common-layout {
  width: 100%;
  height: 100%;
  background-color: #f5f5f5;
  padding: 25px 15px 25px 15px;
  box-sizing: border-box;
  .headerBox {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: start;
    .leftPart {
      width: 200px;
      .bigTit {
        font-size: 24px;
        margin-bottom: 15px;
      }
      .smaTit {
        font-size: 14px;
        color: #6c757d;
      }
    }
    .rightPart {
      width: 110px;
    }
  }
  .mainCont {
    width: 100%;
    overflow: hidden;
    background-color: #fff;
    margin-top: 30px;
    margin-bottom: 500px;
    .header {
      width: 100%;
      height: 60px;
      line-height: 60px;
      padding-left: 20px;
      border-bottom: 1px solid #e9ecef;
    }
  }
  ::v-deep .el-dialog {
    padding: 0;
  }

  ::v-deep .el-dialog__header {
    padding: 15px;
    border-bottom: 1px solid #e0e0e0;
    font-weight: bold;
  }
  ::v-deep .el-dialog__body {
    padding: 15px;
    border-bottom: 1px solid #e0e0e0;
  }
  .el-table__body tr {
    padding: 0;
    height: 60px;
  }
  .demo-ruleForm {
    .el-form-item {
      margin-bottom: 5px;
      display: block;
      ::v-deep .el-form-item__content {
        width: 100%;
      }
    }
    ::v-deep .el-input__wrapper {
      width: 450px;
      flex-grow: 0;
    }
    ::v-deep .el-textarea {
      width: 472px;
      .el-textarea__inner {
        height: 70px;
      }
    }
  }
}
</style>
